<template>
    <div >

        <!-- 主体部分 -->
        <el-col :span="22" :offset="1">
            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
            <div style="height: 20px;"/>
            <el-card>
                <div class="c1" style="height: 370px">
                    <!-- 左侧头像部分 -->
                    <el-col :span="4" >
                        <br/><br/><br/>
                        <div class="block"><el-avatar :size="70" :src="ico"></el-avatar></div><br/>
                        <el-tag :type="powerT">{{ powerN }}</el-tag><br/><br/>
                        <p>{{ name }}</p><br/>

                        <el-button type="text" @click="dialogVisible = true">更新头像</el-button><br/>
                        <el-button type="text" @click="msgClock = false">修改个人信息</el-button><br/>
                        <el-button type="text" @click="passwordWindows = true">修改密码</el-button><br/>

                        <el-dialog title="上传头像" :visible.sync="dialogVisible" width="30%" >
                            <myUpload @transferToParents="getURL"/>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="update">确 定</el-button>
                        </span>
                        </el-dialog>

                        <el-dialog title="更新密码" :visible.sync="passwordWindows" width="30%"  >
                            <el-col :span="5"><span>原密码</span></el-col>
                            <el-col :span="16" :offset="2">
                                <el-input type="password" v-model="password" show-password/>
                            </el-col>
                            <el-col :span="24"><br/></el-col>


                            <el-col :span="5"><span>新密码</span></el-col>
                            <el-col :span="16" :offset="2">
                                <el-input type="password" v-model="passwordNew" show-password/>
                            </el-col>
                            <el-col :span="24"><br/></el-col>

                            <el-col :span="5"><span>重复密码</span></el-col>
                            <el-col :span="16" :offset="2" >
                                <el-input type="password" v-model="passwordNew1" show-password/>
                            </el-col>
                            <el-col :span="24"><br/></el-col>

                            <span slot="footer" class="dialog-footer">
                            <el-button @click="passwordWindows = false">取 消</el-button>
                            <el-button type="primary" @click="updatePassword">确 定</el-button>
                        </span>
                        </el-dialog>
                    </el-col>
                    <!-- 右侧信息部分 -->
                    <el-col :span="10" :offset="3" class="inputDeep">

                        <!-- 空头 -->
                        <el-col :span="24"><br/><br/></el-col>

                        <!-- 昵称 -->
                        <el-col :span="3"><span>昵称</span></el-col>
                        <el-col :span="15" :offset="2"><el-input v-model="name" :disabled="msgClock"/></el-col>
                        <el-col :span="24"><br/></el-col>

                        <!-- 生日 -->
                        <el-col :span="3"><span>生日</span></el-col>
                        <el-col :span="15" :offset="2"><el-input v-model="birthday" :disabled="msgClock"/></el-col>
                        <el-col :span="24"><br/></el-col>

                        <!-- 邮箱 -->
                        <el-col :span="3"><span>邮箱</span></el-col>
                        <el-col :span="15" :offset="2"><el-input v-model="email" :disabled="msgClock"/></el-col>
                        <el-col :span="24"><br/></el-col>

                        <!-- 签名 -->
                        <el-col :span="3"><span>签名</span></el-col>
                        <el-col :span="15" :offset="2"><el-input v-model="showMsg" :disabled="msgClock"/></el-col>
                        <el-col :span="24"><br/></el-col>

                        <!-- 更新按钮 -->
                        <el-button @click="updateMessage" v-show="!msgClock" type="success">更新</el-button>
                        <!-- 取消 -->
                        <el-button @click="msgClock = true" v-show="!msgClock">取消</el-button>

                    </el-col>
                </div>
            </el-card>
        </el-col>

    </div>
</template>

<script>
    import myUpload from "../components/utils/upload"
    export default {
        name: "UserMessage",
        components:{myUpload},
        created: function f() {
            this.$axios
                .get('/api/user/getMsg')
                .then((req)=>{
                    const tmp = req.data.data;
                    this.name = tmp.name;
                    this.phone = tmp.phone;
                    this.birthday = tmp.birthday;
                    this.showMsg = tmp.showMsg;
                    this.email = tmp.email;
                    this.power = tmp.power;
                    // ico 非空装载 ico
                    if(tmp.ico){
                        this.ico = tmp.ico;
                    }
                    this.powerT = this.powerType[this.power];
                    this.powerN = this.powerName[this.power];
                })
        },
        data(){
            return{
                password:'',
                passwordNew:'',
                passwordNew1:'',
                passwordWindows:false,
                phone:'',
                birthday:'',
                showMsg:'',
                email:'',
                msgClock:true,
                name:'王五',
                tmpIco:'',
                nameJump:false,
                dialogVisible: false,
                powerType: ["info", "success", "warning", "danger"],
                powerName: ["未认证用户", "认证用户", "管理员", "封禁用户"],
                power:'',
                powerT: "info",
                powerN: "未认证用户",
                userName: "用户_error",
                ico:
                    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },
        methods:{
            goHome:function () {
                this.$router.push("/home")
            },
            getURL(msg){
                this.tmpIco = msg;
            },
            update:function () {
                let data = {
                    "ico":this.tmpIco
                };
                this.$axios
                    .post("/api/user/update", data)
                    .then((req)=>{
                        this.ico = this.tmpIco;
                        this.$message.success("更新完成");
                        this.dialogVisible = false;
                        location.reload();
                    })
            },
            // 更新用户信息功能
            updateMessage:function () {
                let data = {
                    "name":this.name,
                    "birthday":this.birthday,
                    "showMsg":this.showMsg,
                    "email":this.email
                };
                this.$axios
                    .post("/api/user/update", data)
                    .then((req)=>{
                        this.$message.success("更新成功");
                        this.msgClock = true;
                        location.reload();
                    })
            },
            // 更新密码
            updatePassword:function () {
                let params = new URLSearchParams();
                params.append("password",this.password);
                params.append("passwordNew",this.passwordNew);
                this.$axios
                    .post("/api/user/updatePassword",params)
                    .then((req)=>{
                        const tmp = req.data;
                        console.log(tmp);
                        if(tmp.success){
                            this.$message.success(tmp.data);
                            localStorage.removeItem('token');
                            this.$router.push("/");
                        }else{
                            this.$message.error(tmp.errorMsg);
                        }

                    })
                this.passwordWindows = false;
            }
        }
    }
</script>

<style scoped>
    #root{
        width: 100%;
        height: 100%;
        background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0165625576d19800000059ff821340.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653796498&t=ee4335ec1cc486ac2f77ea4129907e92");
        background-size: 100% 100%;
    }
    #head{
        width: 100%;
        height: 30px;
        background: rgba(167,171,183,0.8);
        position:fixed;
    }
    .c1{
        background: rgba(254, 251, 255, 1);
        /* 设置圆角 */
        border-radius: 30px;
    }
    .split{
        width: 50px;
        background-color: darkgray;
    }
    .inputDeep>>>.el-input__inner {
        border: 0;
    }
</style>
